const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const entry = {
  index: {
    import: resolve(__dirname, 'src/entry/index.js'),
  },
};

const output = {
  path: resolve(__dirname, 'build'),
  filename: '[name].js',
  clean: true,
};

const RESOLVE = {
  extensions: ['.css', '.js'],
  alias: {
    ['@']: resolve(__dirname, 'src')
  },
}

const MODULE = {
  rules: [
    {
      test: /\.css$/,
      include: [ 
        resolve(__dirname, 'src'),
      ],
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.(svg|png|jpg|jpeg)$/,
      type: 'asset/resource',
      generator: {
        filename: 'assets/image/[name][ext]'
      },
    }
  ]
}

const plugins = [
  new HtmlWebpackPlugin()
]

module.exports = {
  entry,
  output,
  mode: 'development',
  devServer: {
    liveReload: false
  },
  module: MODULE,
  resolve: RESOLVE,
  plugins,
  devtool: 'source-map'
}